import React, { memo } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { CategoryWrapper ,SubWrapper} from './style'
import { getCurrentCatAction,getPlaylistAction } from '../../store/actionCreators'
export default memo(function Category(props) {
  const {showCate} = props
  const { cateList ,currentCat} = useSelector(state => ({
    cateList: state.getIn(['playlist', 'catList']),
    currentCat:state.getIn(['playlist','currentCat'])
  }), shallowEqual)
  const dispatch = useDispatch()
  const chooseCat = cat => {
    dispatch(getCurrentCatAction(cat))
    dispatch(getPlaylistAction())
    showCate()
  }
  const category = cateList || []
  return (
    <CategoryWrapper>
      <div className="arrow sprite_icon"></div>
      <div className="all">
        <span className="link" onClick={e => chooseCat('全部')}>全部风格</span>
      </div>
      <div className="category">
        {
          category.map((item, index) => {
            return (
              <dl key={item.name} className={"item" + index}>
                <dt>
                  <i className="icon sprite_icon2"></i>
                  <span>{item.name}</span>
                </dt>
                <dd>
                  {
                    item.subs.map(sItem => {
                      return (
                        <SubWrapper className="item" key={sItem.name} isActive={sItem.name === currentCat}>
                          <span className="link" onClick={e => chooseCat(sItem.name)}>{sItem.name}</span>
                          <span className="divider">|</span>
                        </SubWrapper>
                      )
                    })
                  }
                </dd>
              </dl>
            )
          })
        }
      </div>
    </CategoryWrapper>
  )
})
